<template>
  <div class="page_forum" id="forum_index">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-9">
            <div class="card_forum_list">
              <h4>论坛列表</h4>
              <list_forum :list="list"></list_forum>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="card_list_hot">
              <h4>热门论坛列表</h4>
              <list_forum_hot :list="list_hot"></list_forum_hot>
            </div>
          </div>
        </div>
        
        <div class="row">
          <div class="col overflow-auto flex_cc">
            <b-pagination-nav
              :base-url="$route.path"
              :number-of-pages="count_pages"
              :link-gen="link_gen"
              @change="change_page"
              first-number
              last-number
            ></b-pagination-nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
import list_forum from "../../components/diy/list_forum.vue";
import list_forum_hot from "../../components/diy/list_forum_hot.vue";

export default {
  mixins: [mixin],
  components: {
    list_forum,
    list_forum_hot,
  },
  data() {
    return {
      url_get_list: "~/api/forum/get_list?",
      list: [],
      query: {
        page: 1,
        size: 3,
      },
      list_hot: [],
      // 页面数
      count_pages: 1,
    };
  },
  methods: {
    get_list_after(json) {
      this.count_pages = Math.ceil(json.result.count / this.query.size);
    },
    link_gen(page_num) {
      return {
        query: {
          page: page_num,
        },
      };
    },
    change_page(page_num) {
      this.query.page = page_num;
      this.get_list();
    },
    get_hot_forum() {
      this.$get(
        "~/api/forum/get_list",
        {
          page: 1,
          size: 10,
          orderby: "hits",
        },
        (res) => {
          if (res.result) {
            this.list_hot = res.result.list;
          }
        }
      );
    },
  },
  mounted() {
    this.get_hot_forum();
  },
};
</script>

<style scoped>
.flex_cc{
  display: flex;
  justify-content: center;
  align-items: center;
}
.forum_list h4 {
  font-size: 20px;
}
.list_hot {
  flex: 0 0 30%;
  overflow: hidden;
}
.list_hot h4 {
  font-size: 20px;
}
</style>
